<template>
  <a-card class="ant-pro-pages-list-projects-card" hoverable>
    <img v-if="type == 'product'" slot="cover" v-lazy="item.cover_imgs ? item.cover_imgs : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" />
    <template v-else>
      <img v-if="item.backgroundImage" slot="cover" v-lazy="item.backgroundImage" :alt="item.name" />
      <img slot="cover" v-else-if="item.videoDetail" v-lazy="item.videoDetail.coverUrl" :alt="item.name" />
      <img slot="cover" v-else src="https://img.bzhz.jnbygroup.com/cloth.png" :alt="item.name" />
    </template>
    <div class="cardItemContent">
      <div v-if="type == 'product'" class="product-box">
        <p>
          {{ item.value }}
        </p>
        <p>款号：{{ item.name }}</p>
      </div>
      <div v-else class="material-box">
        <p>{{ item.name }}</p>
        <p>{{ item.classifyName }}</p>
        <p>{{ item.lookId }}</p>
        <p>{{ item.isCopyrightCreatePoster == 'Y' ? '' : '不可生成海报' }}</p>
      </div>
    </div>
    <div class="btn" v-if="isAdd">
      <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addGoods(item)" block></a-button>
    </div>
  </a-card>
</template>
<script>
import { log } from 'mathjs'
export default {
  props: {
    item: {
      type: Object,
      default: {}
    },
    type: {
      type: String,
      default: ''
    },
    isAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    addGoods(val) {
      this.$emit('add', val)
    }
  }
}
</script>
<style lang="less" scoped>
.cardItemContent {
  padding: 0px 0px 6px;
  line-height: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  >.product-box {
    margin-top: 8px;
    // min-height: 60px;
    max-height: 73px;
  }
  >.material-box{
    margin-top: 8px;
    min-height: 124px;
  }
  > p {
    font-size: 12px;
    line-height: 16px;
    // margin-bottom: 10px;
  }
  > h3 {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .topping {
      height: 22px;
      border-radius: 2px;
      border: 1px solid #1890ff;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1890ff;
      line-height: 22px;
      padding: 0 4px;
      margin-right: 4px;
      display: block;
      float: left;
      margin-top: 3px;
    }
  }

  .origin {
    font-size: 12px;

    font-weight: 400;
    color: #8c8c8c;
    line-height: 26px;
  }

  /deep/ .ant-pro-avatar-list {
    flex: 0 1 auto;
  }
  /deep/.ant-skeleton-title {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>

